<template>
  <div class="toux">
    <van-nav-bar
      title="修改头像"
      left-arrow
      @click-left="$router.go(-1)"
      :right-text="main === true ? '保存' : ''"
      @click-right="savk"
    >
      <!-- @click-right="savee" -->
      <template #left>
        <van-icon name="arrow-left" size="18" />
      </template>
    </van-nav-bar>
    <van-uploader
      @delete="ondelete"
      :after-read="afterRead"
      preview-size="200px"
      :preview-image="true"
      class="uploader"
      v-model="fileList"
      :max-count="1"
    >
    </van-uploader>
  </div>
</template>
<script>
/*
a.写样式结构:cv导航栏,再到NavBar 导航栏去查找结构
b.看修改用户信息文档(头像id，通过文件上传接口获取),先通过上传文件,获取文件id,用到文章id在通过修改用户信息提交用户数据
c.先导入uploadAvatar的api,api已经封装了方法,提交到服务器(参数是file.file),利用data定义数据id接收,在res.data[0].id把id取出来,在给保存点击事件,把信息修改提交的服务器(参数id),提示用户,后退上一页
*/
import { uploadAvatar, edit } from '@/api/api.js'
// import { mapState } from 'vuex',
export default {
  // 图片预览,dom一加载就显示预览图
  mounted () {
    this.fileList = [
      {
        url: this.$store.state.userInfo.avatar
      }
    ]
  },
  data () {
    return {
      main: false,
      // baseUrl: process.env.VUE_APP_URL,
      id: '', // 文件上传id
      fileList: [] // 图片预览
    }
  },

  methods: {
    // upload改变触发事件显示保存   定义变量false 三元判断变量 触发upload 改变为true
    ondelete () {
      this.main = true
    },
    // 文件上传
    async afterRead (file) {
      console.log(file)
      // 轻提示 官网查找,0:是无限时长,没加载出来一直显示, 提示上传中, true:加载时不能点击
      this.$toast.loading({
        duration: 0,
        message: '上传中...',
        forbidClick: true
      })
      //   const formData = new FormData() // 创建一个formDate 往formDate里面加属性
      //   formData.append('file', file.file)
      // 上传接口,获取文件id,是修改用户信息的参数,在提交用户信息到服务器
      const res = await uploadAvatar(file.file)
      this.id = res.data[0].id
      console.log(res)
      this.$toast.success('上传成功')
    },
    // 提交用户信息
    async savk () {
      await edit({ avatar: this.id })
      this.$toast.success('用户信息更新成功')
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="less" scoped>
.toux {
  .van-nav-bar {
    margin-bottom: 50px;
  }
  .van-cell__value {
    color: #9c9c9e;
  }
  /deep/ .uploader.van-uploader {
    display: flex;
    margin-left: 20%;
  }
  /deep/ .van-uploader__upload {
    //   width: 200px;
    // background-color: #f7f4f5;
    margin: auto;
  }
}
</style>
